<template>
	<div>
		<el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="发送邮件" name="first">
				<el-form ref="formRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
					<el-form-item label="收件邮箱" prop="to">
						<el-input v-model="ruleForm.to" autocomplete="off" placeHolder="请输入收件邮箱" />
					</el-form-item>
					<el-form-item label="邮件标题" prop="title">
						<el-input v-model="ruleForm.title" autocomplete="off" placeHolder="请输入邮件标题" />
					</el-form-item>
					<el-form-item label="邮件内容" prop="content">
						<el-input v-model.number="ruleForm.content" type="textarea" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm()">发送</el-button>
						<!-- <el-button @click="resetForm()">重置</el-button> -->
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="发送Html邮件" name="second">
				<el-form ref="formRef_01" :model="ruleForm_01" status-icon :rules="rules_01" label-width="120px" class="demo-ruleForm">
					<el-form-item label="收件邮箱" prop="to">
						<el-input v-model="ruleForm_01.to" autocomplete="off" placeHolder="请输入收件邮箱" />
					</el-form-item>
					<el-form-item label="邮件标题" prop="title">
						<el-input v-model="ruleForm_01.title" autocomplete="off" placeHolder="请输入邮件标题" />
					</el-form-item>
					<el-form-item label="邮件内容" prop="content">
						<div style="border: 1px solid #ccc" class="w-100">
							<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" style="border-bottom: 1px solid #ccc" />
							<Editor
								:defaultConfig="editorConfig"
								mode="default"
								v-model="ruleForm_01.content"
								style="height: 300px; overflow-y: hidden"
								@onCreated="handleCreated"
								@onChange="handleChange"
								@onDestroyed="handleDestroyed"
								@onFocus="handleFocus"
								@onBlur="handleBlur"
								@customAlert="customAlert"
								@customPaste="customPaste"
							/>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm_01()">发送</el-button>
						<!-- <el-button @click="resetForm()">重置</el-button> -->
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, shallowRef, onBeforeUnmount, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { validateEmail } from '/@/utils/validators';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import request from '/@/api/develop/email';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();




const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
	const editor = editorRef.value;
	if (editor == null) return;

	editor.destroy();
});

// 编辑器回调函数
const handleCreated = (editor: any) => {
	// console.log('created', editor);
	editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleChange = (editor: any) => {
	// console.log('change:', editor.getHtml());
};
const handleDestroyed = (editor: any) => {
	// console.log('destroyed', editor);
};
const handleFocus = (editor: any) => {
	// console.log('focus', editor);
};
const handleBlur = (editor: any) => {
	// console.log('blur', editor);
};
const customAlert = (info: any, type: any) => {
	// alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor: any, event: any, callback: any) => {
	// console.log('ClipboardEvent 粘贴事件对象', event);
	// 自定义插入内容
	editor.insertText('xxx');

	// 返回值（注意，vue 事件的返回值，不能用 return）
	callback(false); // 返回 false ，阻止默认粘贴行为
	// callback(true) // 返回 true ，继续默认的粘贴行为
};



const formRef = ref<FormInstance>();
const formRef_01 = ref<FormInstance>();

const ruleForm = reactive({
	to: '',
	title: '',
	content: '',
});

const rules = reactive({
	to: [{ validator: validateEmail, required: true, label: '邮箱地址', trigger: ['blur', 'change'] }],
	title: [{ required: true, message: '邮件标题不能为空', trigger: ['blur', 'change'] }],
	content: [{ required: true, message: '邮件内容不能为空', trigger: ['blur', 'change'] }],
});

const ruleForm_01 = reactive({
	to: '',
	title: '',
	content: '',
});

const rules_01 = reactive({
	to: [{ validator: validateEmail, required: true, label: '邮箱地址', trigger: ['blur', 'change'] }],
	title: [{ required: true, message: '邮件标题不能为空', trigger: ['blur', 'change'] }],
	content: [{ required: true, message: '邮件内容不能为空', trigger: ['blur', 'change'] }],
});

const state = reactive({
	activeName: 'first',
});

const handleClick = () => {};

// 发送表单
const submitForm = () => {
	formRef.value?.validate(async (valid) => {
		if (!valid) return;
		await request.emailSendEmail(ruleForm);
	});
};

// 发送html表单
const submitForm_01 = () => {
	formRef_01.value?.validate(async (valid) => {
		if (!valid) return;
        console.log(ruleForm_01)
		await request.emailSendEmailHtml(ruleForm);
	});
};
</script>
